<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pagination</title>
</head>
<body>
	<div class="pagination clearfix">
		<div class="pagination-info">
			Showing <strong>${page.from}</strong> to <strong>${page.to}</strong>
			of <strong>${page.itemCount}</strong> entries
		</div>
		<div class="pagination-pages">
			<div class="pagination-page">

				<c:if test="${!page.first}">
					<a href="${page.url}?page.selectPage=${page.previous}">&laquo;Previous</a>&nbsp;
				</c:if>

				<c:forEach items="${page.slice}" var="item">
					<c:choose>
						<c:when test="${item == page.selectPage}">
							<span class="cur">${page.selectPage}</span>&nbsp;
						</c:when>
						<c:otherwise>
							<a href="${page.url}?page.selectPage=${item}">${item}</a>&nbsp;
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<c:if test="${!page.last}">
					<a href="${page.url}?page.selectPage=${page.next}">Next&raquo;</a>&nbsp;
				</c:if>
			</div>
			<div class="pagination-count">
				total <strong>${page.pageCount}</strong> pages
			</div>
			<div class="pagination-form">
				page<input type="text" placeholder="" maxlength="3" id="pageNum" />
				<input type="button" value="Go" class="btn" onclick="navigate()">
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function navigate() {
			var pageNum = document.getElementById("pageNum");
			var num = pageNum.value;

			if (num) {
				if (!isNaN(num)) {
					var total = ${page.pageCount};
					if (num > total || num < 0) {
						alert(num + " out of scope, not in 1 - " + total)
						pageNum.select();
					} else {
						window.location = "${page.url}?page.selectPage=" + num;
					}
					return false;
				} else {
					alert('Please enter a number in [1, ' + total + "]");
					pageNum.select();
					return false;
				}
			} else {
				alert('Please enter a number in [1, ' + total + "]");
				pageNum.focus();
			}
		}
	</script>
</body>
</html>